<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>

    <p>1</p>
    <p>2</p>
    <p>3</p>

    <div>333333333</div>

    <h3 style="display: none;">222</h3>

    <script>

        // jq本质就是一个构造函数   核心就是围绕DOM操作


        // 获取了所有的元素
        function GetEle(selector) {
            this.eles = document.querySelectorAll(selector);
        }


        // 绑定点击事件
        GetEle.prototype.click = function(cb) {
            this.eles.forEach( v=> {
                v.onclick = cb ;
            })
        }


        // 隐藏元素
        GetEle.prototype.hide = function() {
            this.eles.forEach(v => {
                v.style.display = 'none';
            })
        }

        GetEle.prototype.show = function() {
            this.eles.forEach(v => {
                v.style.display = 'block';
            })
        }


        // toggle  如果是显示的就隐藏，如果是隐藏的就显示  ？？？


        // const oPs = new GetEle('p') ;
        // console.log(oPs);


        // const oDiv = new GetEle('div') ;

        // 实例化对象
        function $(selector) {
            // const ele = new GetEle(selector) ;
            // return ele
            return new GetEle(selector) ;
        }


        const res = $('p') ;
        console.log(res);


        // const oPs = $('p') ;
        // oPs.click(function() {
        //     console.log(666);
        // })

        $('p').click(function() {
            console.log(666);
        })


        // 事件冒泡
        //    子元素的事件会触犯父元素的同类型事件

        $('body').click(function() {
            $('p').hide() ;
        })


        $('div').click(function() {
            console.log($('p'));
            $('p').show()
        })

    </script>
    
</body>
</html>